<script setup lang="ts">
import router from '@/router';
import { Money } from '@element-plus/icons-vue';
import { ref } from 'vue'

//接口 Start
import { addCard } from '@/api/YouHuiQuan/YouHuiQuan'
import type { coupon } from '@/api/YouHuiQuan/YouHuiQuan'
// mport {test} from '@/api/YouHuiQuan/YouHuiQuan'
import axios from 'axios';

const cardName = ref('')
const radioType = ref('1')
const price = ref(0)
const discount = ref(0)
const when1 = ref(0)
const when2 = ref(0)
const radioTime = ref('1')
const dateBetween = ref([])
const day = ref(0)
const putNum = ref(0)
const userNum = ref(1)

const Coupon:coupon = {
    name:cardName.value,
    userType : Number(radioType.value),
    money:price.value,
    minPrice :when1.value,
    isFixedTime:Boolean(radioTime.value),
    useStartTime :dateBetween.value[0],
    useEndTime :dateBetween.value[1],
    day: day.value,
    total :putNum.value,
    //userNum:userNum.value,
    status :true
}
// //新增优惠券接口
let addNewCard = async () => {
    let { data }: { [propsName: string]: any } = await addCard(Coupon)
    if (data.code == 200){
        console.log('AddCard通过')
    }
}




//接口 End
const submit = () => {
    addNewCard()
    console.log('优惠券名称：', cardName.value);
    console.log('优惠券类型：', radioType.value);
    console.log('抵扣金额：', price.value);
    console.log('折扣额度：', discount.value);
    console.log('使用门槛1：', when1.value);
    console.log('使用门槛2：', when2.value);
    console.log('有效期限：', radioTime.value);
    console.log('有效时间：', dateBetween.value);
    console.log('生效条件：', day.value);
    console.log('生效条件：', putNum.value);
    console.log('每人限领', userNum.value);

}

const goBack = () => {
    router.push('/home/youhuiquan')
}
</script>

<template>
    <div class="addCard">
        <div class="board">
            <div class="contentTop">
                <div class="content-item">
                    <div class="contentL">
                        <div>优惠券名称<label class="star">*</label>：</div>
                    </div>
                    <div class="contentR">
                        <div>
                            <el-input style="height: 35px;" v-model="cardName" maxlength="9" placeholder="请输入优惠券名称"
                                show-word-limit type="text" />
                        </div>
                        <label class="tips">字数上限为9个汉字(建议涵盖卡券属性、服务及金额)。</label>
                    </div>
                </div>
                <div class="content-item marginTop">
                    <div class="contentL">
                        <div>优惠券类型<label class="star">*</label>：</div>
                    </div>
                    <div class="contentR">
                        <div>
                            <el-radio-group v-model="radioType" style="height: 35px; line-height: 35px;">
                                <el-radio label="1" style="color: gray;">代金券</el-radio>
                                <el-radio label="2" style="color: gray;">折扣券</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
            </div>
            <!--代金券-->
            <div class="content1" v-if="radioType === '1'">
                <div class="content-item marginTop">
                    <div class="contentL">
                        <div>抵扣金额<label class="star">*</label>：</div>
                    </div>
                    <div class="contentR">
                        <div>
                            <el-input style="height: 35px;" v-model="price" placeholder="请输入抵扣金额">
                                <template #append>元</template>
                            </el-input>
                        </div>
                    </div>
                </div>
                <div class="content-item marginTop">
                    <div class="contentL">
                        <div>使用门槛<label class="star">*</label>：</div>
                    </div>
                    <div class="contentR">
                        <div>
                            <el-input style="height: 35px;" v-model="when1" placeholder="">
                                <template #prepend>满</template>
                                <template #append>元可使用</template>
                            </el-input>
                            <label class="tips">消费金额满XX元后可使用，无门槛请设为0</label>
                        </div>
                    </div>
                </div>
            </div>
            <!--代金券1 End-->
            <!--折扣券2 Start-->
            <div class="content2" v-else-if="radioType === '2'">
                <div class="content-item marginTop">
                    <div class="contentL">
                        <div>折扣额度<label class="star">*</label>：</div>
                    </div>
                    <div class="contentR">
                        <div>
                            <el-input style="height: 35px;" v-model="discount" placeholder="请输入折扣额度">
                                <template #append>折</template>
                            </el-input>
                            <label class="tips">请输入1-9.9之间的数字，精确到小数点后1位</label>
                        </div>
                    </div>
                </div>
                <div class="content-item marginTop">
                    <div class="contentL">
                        <div>使用门槛<label class="star">*</label>：</div>
                    </div>
                    <div class="contentR">
                        <div>
                            <el-input style="height: 35px;" v-model="when2" placeholder="">
                                <template #prepend>满</template>
                                <template #append>元可使用</template>
                            </el-input>
                            <label class="tips">消费金额满XX元后可使用，无门槛请设为0</label>
                        </div>
                    </div>
                </div>
            </div>
            <!--折扣券2 End-->

            <!--有效期限 -->
            <div class="contentMiddle">
                <div class="content-item marginTop">
                    <div class="contentL">
                        <div>有效期限<label class="star">*</label>：</div>
                    </div>
                    <div class="contentR">
                        <div>
                            <el-radio-group v-model="radioTime" style="height: 35px; line-height: 35px;">
                                <el-radio label="1" style="color: gray;">固定时间</el-radio>
                                <el-radio label="2" style="color: gray;">按领取后计算</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
            </div>
            <!--有效期限-->

            <!--代金券11--固定时间 Start-->
            <div class="content11" v-if="radioTime === '1'">
                <div class="content-item marginTop">
                    <div class="contentL">
                        <div>有效时间：</div>
                    </div>
                    <div class="contentR">
                        <div>
                            <div class="block">
                                <el-date-picker v-model="dateBetween" type="daterange" range-separator="--"
                                    start-placeholder="请选择" end-placeholder="请选择" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--代金券11--固定时间 End-->


            <!--代金券22--按领取后计算-->
            <div class="content22" v-else-if="radioTime === '2'">
                <div class="content-item marginTop">
                    <div class="contentL">
                        <div>生效条件：</div>
                    </div>
                    <div class="contentR">
                        <div>
                            <div class="block">
                                <el-input style="height: 35px;" v-model="day" placeholder="">
                                    <template #prepend>领券</template>
                                    <template #append>天后可用</template>
                                </el-input>
                                <label class="tips">领券XX天后，才能使用此优惠券，为0时立即生效</label>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="content-item marginTop">
                <div class="contentL">
                    <div>发放数量<label class="star">*</label>：</div>
                </div>
                <div class="contentR">
                    <div>
                        <el-input style="height: 35px;" v-model="putNum" placeholder="">
                            <template #append>张</template>
                        </el-input>
                        <label class="tips">发放数量限制(默认为0则无限制)</label>
                    </div>
                </div>
            </div>
            <div class="content-item marginTop">
                <div class="contentL">
                    <div>每人限领：</div>
                </div>
                <div class="contentR">
                    <div>
                        <el-input style="height: 35px;" v-model="userNum" placeholder="">
                            <template #append>张</template>
                        </el-input>
                        <label class="tips">每个用户领券上限，如不填则默认为1</label>
                    </div>
                </div>
            </div>
            <div class="flexEvenly" style="margin-top: 40px;">
                <el-button type="primary" @click="goBack">返回</el-button>
                <el-button type="primary" @click="submit">保存</el-button>
            </div>
        </div>

    </div>
</template>

<style scoped lang="less">
@import url('./YouHuiQuan.css');

div {
    box-sizing: border-box;
}

.addCard {
    width: 100%;
    height: 100%;
    font-size: 10px;
    background-color: #F2F2F2;
    border-top: 1px #D5D5D5 solid;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

    .board {
        width: 95%;
        height: 92%;
        padding: 30px 1.5%;
        background-color: white;
        margin-top: 30px;
        font-size: 1.5em;

        .content-item {
            width: 100%;
            overflow: hidden;
            text-align: left;

            .contentL {
                width: 15%;
                margin-left: 20%;
                float: left;
                text-align: right;

                div {
                    height: 35px;
                    line-height: 35px;
                }
            }

            .contentR {
                width: 45%;
                margin-right: 20%;
                float: right;
                text-align: left;
            }
        }

        .star {
            color: #FF33A6;
        }

        .tips {
            height: 15px;
            line-height: 15px;
            color: gray;
            font-size: 0.5em;
        }
    }
}
</style>
